<template>
	<view class="mypages">
		<mosowe-canvas-image ref="mosoweCanvasComponents" @canvasImage="_canvasImage" :lists="lists" :height="400"
			width="375" compressSize="2097152" :compress="false" :showPreview="isShowPreview" />
		<view class="mypages__heard">
			<image class="mypages__heardImg" src="/static/images/index_herad_bj.png"></image>
			<image class="mypages__heardImgTwo" src="/static/images/mascot.png"></image>
		</view>
		<view class="mypages__main">

			<view class="mypages__mainCenton">
				<button open-type="share" class="mypages__mainCentonShareBox">
					<span></span>
					<image class="mypages__mainCentonShare" src="/static/images/shareIcon.png"></image>
				</button>

				<!-- 手表展示区 -->
				<view class="mypages__mainTop">
					<view class="mypages__mainTopPickerImgBox" @click.stop="ff_previewImage(mycanvasUrl)"
						v-if="allocationIcon.length != 0">
						<image class="mypages__mainTopPickerImg" mode="widthFix" :src="mycanvasUrl">
						</image>
					</view>
					<!-- <view class="mypages__mainTopPickerImgBox" @click="beginCanvas('showPreview')"
						v-else-if="allocationIcon.length != 0">
						<image class="mypages__mainTopPickerImg" mode="widthFix" @load="imgLoading"
							:src="allocationIcon[0].goodsList[regionIndex[0]].coverSideImg"></image>
						<image class="mypages__mainTopPickerImg" mode="widthFix" @load="imgLoading"
							:src="allocationIcon[1].goodsList[regionIndex[1]].coverSideImg">
						</image>
						<image class="mypages__mainTopPickerImg" mode="widthFix" @load="imgLoading"
							:src="allocationIcon[2].goodsList[regionIndex[2]].coverSideImg">
						</image>
						<image class="mypages__mainTopPickerImg" mode="widthFix" @load="imgLoading"
							:src="allocationIcon[2].goodsList[regionIndex[2]].coverAttachImg">
						</image>
					</view> -->
					<image class="mydipan" src="/static/images/dipan.png"></image>
				</view>

				<!-- 手表配置区 -->
				<view class="mypages__allocation">
					<view class="mypages__allocationTop">
						<view class="mypages__allocationTopItem" v-for="(item,index) in allocationIcon" :key="index">
							<view class="mypages__allocationTopItemLeft">
								<image class="mypages__allocationTopItemLeftImge" :src="item.coverImg"></image>
								<view class="mypages__allocationTopItemLeftText">{{item.partName}}</view>
							</view>
							<view v-if="index != 2" class="mypages__allocationTopItemLeftIcon"></view>
						</view>
					</view>
					<view class="imageItBoxBodys">
						<view class="imageItBox--activateBox"></view>
						<view class="imageItBox--activateBox"></view>
						<view class="imageItBox--activateBox"></view>
					</view>
					<view class="pickerviewbox__leigu" style="width:686rpx;height:240px;">
						<image src="/static/images/wire.png"></image>
						<image src="/static/images/wire.png"></image>
					</view>
					<!-- 	<view class="dituPagesBox" @click.stop="dituPages">
						<span>购买配件</span>
						<image class="dituPages" src="/static/images/dituPages.png"></image>
						<image class="dituPagesImg" src="/static/images/rightSign_action.png"></image>
					</view> -->
					<picker-view @pickstart="ff_pickstart" @pickend="ff_pickend" class="pickerviewbox"
						v-if="allocationIcon.length != 0" :indicator-style="indicatorStyle" :value="regionIndex"
						:mask-style="maskStyle" style="width:686rpx;height:240px;" @change="bindRegionChange">
						<picker-view-column>
							<block v-for="(item,index) in allocationIcon[0].goodsList" :key="index">
								<view @click.stop="ff_previewImage(item.coverImg)"
									:class="index == regionIndex[0] ? 'imageItBox imageItBox--activate' : 'imageItBox'">
									<image :class="index == regionIndex[0] ? 'imageIt--activate' : 'imageIt'"
										:src="item.coverImg"></image>
								</view>
							</block>
						</picker-view-column>
						<picker-view-column>
							<block v-for="(item,index) in allocationIcon[1].goodsList" :key="index" class="imageItBox">
								<view @click.stop="ff_previewImage(item.coverImg)"
									:class="index == regionIndex[1] ? 'imageItBox imageItBox--activate' : 'imageItBox'">
									<image :class="index == regionIndex[1] ? 'imageIt--activate' : 'imageIt'"
										:src="item.coverImg"></image>
								</view>
							</block>
						</picker-view-column>
						<picker-view-column>
							<block v-for="(item,index) in allocationIcon[2].goodsList" :key="index" class="imageItBox">
								<view @click.stop="ff_previewImage(item.coverImg)"
									:class="index == regionIndex[2] ? 'imageItBox imageItBox--activate' : 'imageItBox'">
									<image :class="index == regionIndex[2] ? 'imageIt--activate' : 'imageIt'"
										:src="item.coverImg"></image>
								</view>
							</block>
						</picker-view-column>
					</picker-view>
				</view>

				<!--结算区-->
				<view class="mypages__close">
					<view class="mypages__closeLeft" @click.stop="beginCanvas('add')">
						<image class="mypages__closeLeftIcon" src="/static/images/handbag_a.png"></image>
						<view
							:class="isStop ? 'mypages__closeLeftText' : 'mypages__closeLeftText mypages__closeLeftTextAct'">
							保存到手袋</view>
					</view>
					<uni-transition ref="ani" custom-class="transition" :mode-class="modeClass" :styles="styles"
						:show="show">
						<view :class="isStop ? 'mypages__closeRight mypages__closeRightRed' : 'mypages__closeRight mypages__closeRightAct'"
							@click.stop="beginCanvas('bug')">
							<view class="mypages__closeRightPrice">
								<span>￥</span>
								<span v-if="allocationIcon.length != 0">{{watchPrice}}</span>
							</view>
							<view class="mypages__closeRightTxet"> {{isStop ? '下单购买' : '库存不足'}}</view>
						</view>
					</uni-transition>
				</view>
			</view>
		</view>

		<!-- 添加成功 -->
		<u-overlay :opacity="0.01" :show="isShowDui">
			<view @click.stop="" class="overlayBox">
				<image src="/static/images/duiIcon.png"></image>
				<span>加入手袋成功</span>
			</view>
		</u-overlay>
		<!-- 商品配置-->
		<u-overlay :show="goodShow" @click="goodShow = false">
			<view @click.stop="" class="goodWarp">
				<view class="saleBox__Heard">确认配件</view>
				<view class="saleBox__HeardImg" @click.stop="goodShow = false">
					<image src="/static/images/chacha02.png">
					</image>
				</view>

				<view class="goodWarp_boxItems" @click.stop="ff_isClick(index)" v-for="(item,index) in matchWatch"
					:key="index">
					<view @click.stop="ff_previewImage(item.coverImg)" class="goodWarp_boxItemsImgs">
						<image :src="item.coverImg"></image>
					</view>
					<view class="goodWarp_boxItemsText">
						{{item.goodsName}}
					</view>
					<view class="goodWarp_boxItemsHeard">
						<image :src="item.isTrue ? '/static/images/catIcon_active.png' : '/static/images/catIcon.png'">
						</image>
					</view>
				</view>
				<view class="goodWarp_boxItemsBottom" @click.stop="ff_Send">确认
					<view class="goodWarp_boxItemsBottomHeng"></view>
				</view>
			</view>
		</u-overlay>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				canvasUrl: '',
				mycanvasUrl: '',
				lists: [],
				title: 'Hello',
				indicatorStyle: `height: 75px;opacity: 0`,
				maskStyle: `background: transparent`,
				regionIndex: [1, 1, 1],
				goodsIds: [0, 0, 0],
				allocationIcon: [],
				type: '',
				isShowPreview: false,
				isWatchShow: false,
				partnerNo: '',
				watchPrice: 0,
				modeClass: 'fade',
				styles: {},
				show: false,
				isShowDui: false,
				goodShow: false,
				matchWatch: [],
				cartLength: 0,
				goodsIdLenght: 0,
				holdImg: '',
				isStop: true

			}
		},
		onLoad(query) {
			this.initWatch();

			this.initRegionWxList();
			if (query) {
				const scene = decodeURIComponent(query.scene);
				this.partnerNo = scene.split('=')[1];
				uni.setStorageSync('partnerNo', this.partnerNo)
			}

		},
		onShow() {
			this.initUserInfo();
		},
		onReady() {

		},
		onShareAppMessage() {
			return {
				title: '新潮手表新鲜式',
				path: '/pages/index/index',
				imageUrl: '/static/images/PINDO.png'
			}
		},
		onShareTimeline() {
			return {
				title: '新潮手表新鲜式',
				path: '/pages/index/index',
				imageUrl: '/static/images/PINDO.png'
			}
		},
		computed: {
			search() {
				return this.$store.state.search;
			},
		},
		watch: {
			goodShow(newVal, oldVal) {
				if (!newVal) {
					setTimeout(() => {
						this.matchWatch.map(item => {
							return item.isTrue = 1;
						})
					}, 1000)
				}

			},
			// show(newVal,oldVal){
			// 	if(!newVal){
			// 		uni.showLoading({
			// 			title: '加载中',
			// 			mask: true
			// 		});
			// 	}else{
			// 		uni.hideLoading()
			// 	}
			// }

		},
		methods: {

			handle(type, show) {
				this.show = show;
				this.modeClass = type

				//console.log('已加载完毕--->', type)
			},
			//调用预览图片的方法
			ff_previewImage(myImgs, index = 0) {
				uni.previewImage({
					urls: [myImgs],
					current: index
				})
			},
			initRegionWxList() {
				let region = uni.getStorageSync('region');
				if (!region) {
					uni.showLoading({
						title: '加载中',
						mask: true
					});
					this.$api.regionWxList().then(res => {
						if (res.code == 200) {
							uni.setStorageSync('region', res.data);
						}
					})
				}

			},
			getOssSignData() {
				return new Promise(ress => {
					uni.showLoading({
						title: '加载中',
						mask: true
					});
					this.$api.fileConfig().then(res => {
						this.$store.commit('updataOssSignData', res.data.ossSign)
						ress();
					})
				})

			},
			initUser() {
				return new Promise(ress => {

					this.$api.userWxInfo().then(res => {
						if (res.code == 200) {
							this.$store.commit('updataUser', res.data.user);
							ress(res.data.user);
						}
					});
				})

			},
			initUserInfo() {
				let that = this;
				this.initUser().then(user => {
					let partnerNo = uni.getStorageSync('partnerNo')
					if (user == null) {

						uni.showModal({
							title: '温馨提示',
							content: '亲，授权微信登录后才能正常使用小程序功能',
							success(res) {
								//console.log(0)
								//console.log(res)
								//如果用户点击了确定按钮
								if (res.confirm) {
									uni.getUserProfile({
										desc: '获取你的昵称、头像、地区及性别',
										success: res => {

											let {
												userInfo
											} = res
											console.log('userInfo---->', userInfo)

											let req = {
												address: '',
												avatar: userInfo.avatarUrl,
												nickname: userInfo.nickName,
												sex: userInfo.gender,
												partnerNo
											}
											uni.showLoading({
												title: '加载中'
											});
											that.$api.userWxEdit(req).then(res => {
												//console.log('userWxEdit--->', res.data
												// .user)
												that.$store.commit('updataUser', res
													.data.user);
											})
										},
										fail: res => {
											//console.log(2);
											//console.log(res)
											//拒绝授权
											uni.showToast({
												title: '您拒绝了请求,不能正常使用小程序',
												icon: 'error',
												duration: 2000
											});
										}
									});
								} else if (res.cancel) {
									//如果用户点击了取消按钮
									//console.log(3);
									uni.showToast({
										title: '您拒绝了请求,不能正常使用小程序',
										icon: 'error',
										duration: 2000
									});
								}
							}
						});


					} else if ((partnerNo)) {
						let req = {
							address: user.address,
							avatar: user.avatar,
							nickname: user.nickname,
							sex: user.sex,
							partnerNo
						}
						uni.showLoading({
							title: '加载中',
							mask: true
						});
						that.$api.userWxEdit(req).then(res => {
							//console.log('userWxEdit--->', res.data.user)
							that.$store.commit('updataUser', res.data.user);
						})
					}
				})


			},
			initWatch() {


				this.$api.mallPartWxWatch().then(res => {
					//console.log('res---->', res)
					let nowAllocationIcon = [];
					if (res.code == 200) {
						this.allocationIcon = res.data;
						let nowGoodsIds = [];
						this.allocationIcon.forEach((oneItem, oneIndex) => {
							this.regionIndex.forEach((newItem, newIdex) => {
								if (newIdex == oneIndex) {
									oneItem.goodsList.forEach((twoItem, twoIndex) => {
										if (twoIndex == newItem) {
											nowGoodsIds.push(twoItem.goodsId);
											let newTwoItem = JSON.parse(JSON.stringify(
												twoItem));
											newTwoItem.isTrue = 1;

											this.matchWatch.push(newTwoItem)

										}
									})
								}
							})
						})



						console.log('twoItem手表配置区域--->', this.matchWatch)
						this.goodsIds = JSON.parse(JSON.stringify(nowGoodsIds));
						this.$nextTick(() => {
							this.beginCanvas('showImgs');
						});

						for (let i = 0; i < this.allocationIcon.length; i++) {
							let oneItem = this.allocationIcon[i];
							console.log('oneItem--->',oneItem)
							for (let j = 0; j < this.regionIndex.length; j++) {
								let newItem = this.regionIndex[j];
								if (i == j) {
									console.log('库存--->',oneItem.goodsList[newItem].goodsName,oneItem.goodsList[newItem].stockNum)

									if (!oneItem.goodsList[newItem].stockNum) {
										this.isStop = false;
										return
									}

								}
							}
						}
						this.isStop = true;


					}
				});
			},
			getDomObj() {
				return new Promise((ress, rejj) => {
					let query = uni.createSelectorQuery();
					query.in(this).select('.mypages__mainTopPickerImgBox').boundingClientRect(rect => {
						let nowDomObj = {};
						nowDomObj.height = rect.height;
						nowDomObj.width = rect.width;
						this.domObj = JSON.parse(JSON.stringify(nowDomObj));
						ress();
					}).exec();
				})
			},
			cartWxAddEntirety() {
				let req = {
					goodsIds: this.goodsIds,
					goodsNum: 1,
					productImg: this.canvasUrl,
					productType: 10
				}
				// //console.log('this.goodsIds--->', this.goodsIds)

				this.$api.mallCartWxAdd(req).then(res => {
					if (res.code == 200) {
						this.cartLength = 0;
						uni.hideLoading();
						this.goodShow = false;
						this.isShowDui = true;
						setTimeout(() => {
							this.isShowDui = false;
						}, 1000)

					}
				})
			},
			cartWxAdd() {
				this.cartLength++;
				let req = {
					goodsIds: [this.goodsIds[this.cartLength - 1]],
					goodsNum: 1,
					productImg: this.nowWatchArr[this.cartLength - 1].coverImg,
					productType: 20
				}
				// //console.log('this.goodsIds--->', this.goodsIds)

				this.$api.mallCartWxAdd(req).then(res => {
					if (res.code == 200) {

						if (this.cartLength != this.goodsIdLenght) {
							this.cartWxAdd();
						} else {
							this.cartLength = 0;
							uni.hideLoading();
							this.goodShow = false;
							this.isShowDui = true;

							this.matchWatch.map(item => {
								return item.isTrue = 1;
							})

							setTimeout(() => {
								this.isShowDui = false;
							}, 1000)
						}

					}
				})

				// //console.log('req--->', req)
			},
			ff_shareIcon() {
				uni.showToast({
					icon: 'none',
					title: '开发中...',
					mask: true
				})
			},
			dituPages() {
				uni.navigateTo({
					url: '/package/accessories/index'
				})
			},
			ff_isClick(index) {
				let newMatchWatch = JSON.parse(JSON.stringify(this.matchWatch));
				newMatchWatch[index].isTrue = !newMatchWatch[index].isTrue;
				this.matchWatch = JSON.parse(JSON.stringify(newMatchWatch));
			},
			beginCanvas(type) {
				// this.show = false;
				// if(!this.isStop){
				// 	uni.showToast({
				// 		title:'所选配件，库存不足',
				// 		icon:'none',
				// 		mask:true
				// 	});
				// 	return
				// }


				this.isShowPreview = type == 'showPreview' ? true : false;
				this.getDomObj().then(ress => {
					let nowLists = [];
					// //console.log('this.regionIndex-->', this.regionIndex)

					this.regionIndex.forEach((item, index) => {
						let nowListItem = index == 0 ? JSON.parse(JSON.stringify(this.allocationIcon[0]
							.goodsList)) : index == 1 ? JSON.parse(JSON.stringify(this.allocationIcon[
							1].goodsList)) : index == 2 ? JSON.parse(JSON.stringify(this
							.allocationIcon[2].goodsList)) : '';
						nowLists.unshift({
							type: 'image',
							content: nowListItem[this.regionIndex[index]].coverSideImg,
							width: this.domObj.width,
							height: this.domObj.height,
							x: (188 - (this.domObj.width / 2)),
							y: (200 - ((this.domObj.height) / 2))
						})
					})
					nowLists.unshift({
						type: 'image',
						content: this.allocationIcon[2].goodsList[this.regionIndex[2]].coverAttachImg,
						width: this.domObj.width,
						height: this.domObj.height,
						x: (188 - (this.domObj.width / 2)),
						y: (200 - ((this.domObj.height) / 2))
					})
					nowLists = [nowLists[1], nowLists[3], nowLists[2], nowLists[0]]
					this.lists = JSON.parse(JSON.stringify(nowLists));

					if (type == 'showPreview') {

						this.$nextTick(() => {
							this.type = type;
							this.$refs.mosoweCanvasComponents.createCanvas();
						})

					} else if (type == 'showImgs') {

						this.$nextTick(() => {

							this.type = type;
							this.$refs.mosoweCanvasComponents.createCanvas();
						})

					} else {
						for (let i = 0; i <= this.regionIndex.length; i++) {
							let item = this.regionIndex[i];
							if (this.allocationIcon[i] && this.allocationIcon[i].goodsList && this.allocationIcon[
									i]
								.goodsList[item].stockNum == 0) {
								uni.showToast({
									icon: 'none',
									title: `${this.allocationIcon[i].goodsList[item].goodsName}--库存不足`
								})
								return
							}
						}

						this.getOssSignData().then(OssSignRes => {
							this.type = type;
							this.$refs.mosoweCanvasComponents.createCanvas();
						})
					}


				});
			},
			bug(req) {
				// debugger
				uni.hideLoading();
				this.goodShow = false;
				uni.navigateTo({
					url: `/package/orderForm/index?sendObj=${JSON.stringify(req)}`
				})
			},
			_canvasImage(e) {
				this.holdImg = e;
				this.watchPrice = this.allocationIcon[0].goodsList[this.regionIndex[0]].skuPrice + this.allocationIcon[1]
					.goodsList[this.regionIndex[1]].skuPrice + this.allocationIcon[2].goodsList[this.regionIndex[2]]
					.skuPrice

				if (this.type == 'showPreview' || this.type == 'showImgs') {
					this.mycanvasUrl = e;
					this.handle(['fade', 'slide-right'], true);

					uni.hideLoading();
					return
				}
				this.goodShow = true;
				this.show = true;
				uni.hideLoading();


				// //console.log('this.canvasUrl->', e)
			},
			ff_Send() {
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				let isRentrue = false;
				for (let i = 0; i < this.matchWatch.length; i++) {
					let item = this.matchWatch[i];
					if (!item.isTrue) {
						isRentrue = true;
						break;
					}
				}

				this.goodsIds = [];
				this.nowWatchArr = [];

				this.matchWatch.forEach(item => {
					if (item.isTrue) {
						this.goodsIds.push(item.goodsId);
						this.nowWatchArr.push(item);
						console.log('item.goodsId--->', item)
					}
				});
				this.goodsIdLenght = this.goodsIds.length;
				if (!this.goodsIdLenght) {
					uni.showToast({
						title: '请选择配件!',
						icon: 'none',
						mask: true
					})
					return
				};

				if (isRentrue) {
					//  手表配件
					if (this.type == 'add') {
						// 保存
						this.cartWxAdd();
					} else if (this.type == 'bug') {
						// 购买
						let req = {
							buyType: 1,
							goodsIds: this.goodsIds,
							buyNum: 1,
							// productImg: this.canvasUrl,
							productType: 20
						}
						this.bug(req)




					}


				} else {
					//  手表

					this.$upload(this.holdImg).then(ress => {
						let data = JSON.parse(ress.data);
						// debugger
						this.canvasUrl = data.data.url;

						if (this.type == 'add') {
							// 保存
							this.cartWxAddEntirety();
						} else if (this.type == 'bug') {
							// 购买
							let req = {
								buyType: 1,
								goodsIds: this.goodsIds,
								buyNum: 1,
								productImg: this.canvasUrl,
								productType: 10
							}
							this.bug(req)

						}


					})





				}
			},
			ff_pickstart() {
				this.handle(['fade', 'slide-right'], false);
				// uni.showLoading({
				// 	title: '加载中',
				// 	mask: true
				// });
			},
			ff_pickend() {
				// debugger
				this.handle(['fade', 'slide-right'], true);

				// uni.hideLoading()

			},
			bindRegionChange(e) {



				let changeIndex = 0;
				let lieIndex = 0;
				let nowRegionIndex = JSON.parse(JSON.stringify(this.regionIndex));
				e.detail.value.forEach((item, index) => {
					if (item != nowRegionIndex[index]) {
						changeIndex = index;
					}
				});




				// if (changeIndex != 2) {
				// 	let goodsId = this.allocationIcon[changeIndex].goodsList[lieIndex].goodsId
				// 	uni.showLoading({
				// 		title: '加载中'
				// 	});
				// 	this.$api.wxWatch({
				// 		goodsId
				// 	}).then(resss => {
				// 		let nowAllocationIcon = JSON.parse(JSON.stringify(this.allocationIcon));
				// 		if (changeIndex == 0) {
				// 			nowAllocationIcon[1] = resss.data[0];
				// 			nowAllocationIcon[2] = resss.data[1];
				// 		} else if (changeIndex == 1) {
				// 			nowAllocationIcon[2] = resss.data[0];
				// 		}
				// 		this.allocationIcon = JSON.parse(JSON.stringify(nowAllocationIcon));
				// 	})
				// }

				this.regionIndex = JSON.parse(JSON.stringify(e.detail.value));
				let nowGoodsIds = JSON.parse(JSON.stringify(this.goodsIds));
				nowGoodsIds[changeIndex] = this.allocationIcon[changeIndex].goodsList[this.regionIndex[changeIndex]]
					.goodsId;




				this.goodsIds = JSON.parse(JSON.stringify(nowGoodsIds));
				//console.log('第几列动了---->', changeIndex)
				//console.log('this.goodsIds---->', this.goodsIds)

				// 手表配置区

				let newMatchWatch = JSON.parse(JSON.stringify(this.matchWatch));
				let newItem = this.allocationIcon[changeIndex].goodsList[this.regionIndex[changeIndex]];
				newItem.isTrue = 1;
				newMatchWatch[changeIndex] = newItem;
				this.matchWatch = JSON.parse(JSON.stringify(newMatchWatch));
				console.log('配置完毕------>', )



				this.beginCanvas('showImgs');


				for (let i = 0; i < this.allocationIcon.length; i++) {
					let oneItem = this.allocationIcon[i];

					for (let j = 0; j < this.regionIndex.length; j++) {
						let newItem = this.regionIndex[j];
						if (i == j) {
							if (!oneItem.goodsList[newItem].stockNum) {
								this.isStop = false;
								// this.show = true;
								return
							}
						}
					}
				}
				// this.show = true;
				this.isStop = true;



			}
		}
	}
</script>

<style scoped lang="scss">
	.mypages {
		min-height: 100vh;
		// box-sizing: border-box;
		background-color: #f7f8fc;
		padding-top: 363rpx;
		box-sizing: border-box;


		.mypages__heard {
			height: 412rpx;
			width: 100%;
			position: absolute;
			top: 0;
			left: 0;
		}

		.mypages__heardImg {
			width: 100%;
			height: 100%;
			z-index: 1;

		}

		.goodWarp_boxItemsText {
			flex: 1;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			font-size: 28rpx;
			font-family: 蘋方-簡;
			font-weight: normal;
			color: #2B2B33;
		}

		.mypages__heardImgTwo {
			width: 220rpx;
			height: 220rpx;
			position: absolute;
			bottom: 42rpx;
			right: 46rpx;
			z-index: 999;
		}

		.mypages__main {
			width: 100%;
			// height: calc(100vh - 412rpx - 50rpx);
			background: linear-gradient(180deg, #FFFFFF 30%, #f7f8fc 100%);
			box-shadow: 0px -12px 20px rgba(228, 228, 245, 0.64);
			opacity: 1;
			border-radius: 96rpx 96rpx 0px 0px;
			box-sizing: border-box;
			padding-top: 22rpx;
			position: relative;

		}

		.mypages__mainCentonShare {
			width: 64rpx;
			height: 64rpx;

			display: inline-block;

		}

		.mypages__mainCentonShareBox {
			position: absolute;
			right: 32rpx;
			top: 40rpx;
			background-color: rgba(0, 0, 0, 0);
			z-index: 99;

			&::after {
				border: none;
			}


			span {
				position: absolute;
				bottom: 50rpx;
				left: 50%;
				transform: translateX(-50%);
				width: 10rpx;
				height: .1rpx;
				background: transparent;
				box-shadow: 0 0 20rpx 20rpx #f44b5b;
				border-radius: 50%;
				opacity: 0.54;
				border: none;
			}

		}

		.mypages__mainCenton {
			width: calc(100% - 32rpx);
			position: relative;
			// height: calc(100% - 22rpx);
			background: linear-gradient(180deg, #f7f8fc 0%, #f7f8fc 100%);
			margin: 0 auto;
			border-radius: 96rpx 96rpx 0px 0px;
			box-sizing: border-box;
			padding: 16rpx;

		}

		.mydipan {
			position: absolute;
			width: 286rpx;
			height: 56rpx;
			bottom: -60rpx;
			left: 50%;
			transform: translateX(-50%);
		}

		.mypages__mainTop {
			width: 568‬rpx;
			height: 334rpx;
			margin: 0 auto;
			display: flex;
			justify-content: center;
			position: relative;
			top: 10rpx;
		}
		
.mypages__closeRightRed{
	box-shadow: 0 28rpx 22rpx -26rpx #F44B5B;
}
		.mypages__closeRight {
			width: 420rpx;
			height: 88rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: #F44B5B;
			opacity: 1;
			border-radius: 40rpx;
			color: #fdf0f2;
			

		}

		.mypages__closeRightAct {
			background: #eeeeee !important;
			color: #f1f1f1 !important;

			span {
				background: #eeeeee !important;
				color: #c5bdbd !important;

			}

			.mypages__closeRightPrice {
				border-right: 2rpx solid #c5bdbd !important;
			}

			.mypages__closeRightTxet {
				color: #c5bdbd !important;
			}
		}

		.goodWarp_boxItemsBottom {
			width: 622rpx;
			height: 88rpx;
			line-height: 88rpx;
			background: #F44B5B;
			opacity: 1;
			border-radius: 40rpx;
			font-size: 28rpx;
			font-family: 蘋方-簡;
			font-weight: normal;
			color: #FFFFFF;
			text-align: center;
			margin-top: 32rpx;
			position: relative;
			box-shadow: 0 28rpx 22rpx -26rpx #F44B5B;
		}

		.goodWarp_boxItems {
			width: 100%;
			box-sizing: border-box;
			background: #fff;
			padding: 20rpx 24rpx;
			display: flex;
			height: 168rpx;
			border-radius: 32rpx;
			margin-bottom: 16rpx;

			align-items: center;
		}

		.goodWarp_boxItems:last-child {
			margin-bottom: 0;
		}

		.goodWarp_boxItemsImgs {
			background: #f4f3fc;
			width: 138rpx;
			height: 138rpx;
			flex: 0 0 138rpx;
			border-radius: 24rpx;
			overflow: hidden;
			display: flex;
			justify-content: center;
			margin: 0 16rpx 0 24rpx;
			position: relative;

			image {
				display: inline-block;
				width: 128rpx;
				height: 128rpx;
				position: absolute;
				top: 5rpx;

			}
		}

		.goodWarp_boxItemsBottomHeng {
			width: 480rpx;
			height: .1rpx;
			// background: rgba(219, 35, 53, 0.29);
			opacity: 0.72;
			border-radius: 44rpx;
			position: absolute;
			transform: translateX(-50%);
			bottom: 12rpx;
			left: 50%;
			box-shadow: 0 -5rpx 19rpx 6rpx #f52d40;

		}

		.goodWarp {
			width: 686rpx;
			height: 776rpx;
			padding: 24rpx 32rpx 32rpx;
			box-sizing: border-box;
			background: linear-gradient(180deg, #f7d9df 0%, #f7f8fc 28%);
			position: fixed;
			top: 30%;
			left: 32rpx;
			border-radius: 40rpx;

		}

		.saleBox__HeardImg {
			position: absolute;
			top: 10rpx;
			right: 16rpx;
			width: 68rpx;
			height: 68rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			z-index: 99;

			image {
				width: 28rpx;
				height: 28rpx;
			}
		}

		.goodWarp_boxItemsHeard {
			display: flex;
			align-items: center;
			flex: 0 0 40rpx;

			image {
				display: inline-block;
				width: 40rpx;
				height: 40rpx;
			}
		}

		.saleBox__Heard {
			width: 100%;
			height: 48rpx;
			font-size: 28rpx;
			font-family: 'DIN';
			font-weight: normal;
			line-height: 48rpx;
			color: #2B2B33;
			text-align: center;
			font-weight: bold;
			margin-bottom: 24rpx;

		}

		.overlayBox {
			width: 274rpx;
			height: 90rpx;
			background: rgba(0, 0, 0, 0.9);
			border-radius: 32px;
			display: flex;
			align-items: center;
			justify-content: center;
			position: fixed;
			top: 48%;
			left: 50%;
			transform: translate(-50%, -50%);

			image {
				display: inline-block;
				width: 34rpx;
				height: 34rpx;
			}

			span {
				display: inline-block;
				height: 34rpx;
				font-size: 24rpx;
				font-family: 蘋方-簡;
				font-weight: normal;
				line-height: 34rpx;
				color: #FFFFFF;
				margin-left: 8rpx;

			}
		}

		.mypages__closeRightTxet {
			flex: 0 0 170rpx;
			height: 88rpx;
			line-height: 88rpx;
			font-size: 28rpx;
			font-family: 蘋方-簡;
			font-weight: normal;
			color: #FFFFFF;
			-webkit-text-stroke: 0.4000000059604645 #FFFFFF;
			text-stroke: 0.4000000059604645 #FFFFFF;
			text-align: center;
			font-weight: bold;
		}

		.mypages__closeRightPrice {
			flex: 1;
			text-align: center;
			border-right: 2rpx #f56c7a solid;

			span:nth-child(2) {
				font-size: 40rpx;
				font-family: 'DIN';
				font-weight: 400;
				color: #FFFFFF;
			}

			span:nth-child(1) {
				font-size: 28rpx;
				font-family: 蘋方-簡;
				font-weight: normal;
			}
		}

		.mypages__closeLeftText {
			font-size: 28rpx;
			font-family: 蘋方-簡;
			font-weight: normal;
			color: #2B2B33;
			-webkit-text-stroke: 0.20000000298023224 #2B2B33;
			text-stroke: 0.20000000298023224 #2B2B33;
			margin-left: 8rpx;
			font-weight: bold;
		}

		.mypages__closeLeftTextAct {
			color: #c5bdbd !important;
		}

		.mypages__close {
			width: 100%;
			display: flex;
			justify-content: space-between;
			height: 88rpx;
			// padding-bottom: 20rpx;
		}

		.mypages__closeLeftIcon {
			height: 40rpx;
			width: 40rpx;
		}

		.mypages__closeLeft {
			width: 252rpx;
			height: 88rpx;
			background: #ffffff;
			box-shadow: 0px 6rpx 12rpx rgba(228, 228, 245, 0.64);
			opacity: 1;
			border-radius: 40rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.mypages__allocation {
			width: 686rpx;
			height: 280px;
			background: #FFFFFF;
			box-shadow: 0px 0px 20px rgba(228, 228, 245, 0.72);
			opacity: 1;
			border-radius: 20px;
			// border-top-right-radius: 0;
			margin: 90rpx 0 20rpx;
			// overflow: hidden;
			position: relative;
		}

		.mypages__allocationTop {
			display: flex;
			padding: 16px 60rpx 0;
		}

		.mypages__allocationTopItemLeftImge {
			width: 48rpx;
			height: 48rpx;
		}

		.mypages__allocationTopItemLeftText {
			font-size: 28rpx;
			height: 48rpx;
			line-height: 48rpx;
			font-family: 蘋方-簡;
			font-weight: normal;
			color: #2B2B33;
			-webkit-text-stroke: 0.20000000298023224 #2B2B33;
			text-stroke: 0.20000000298023224 #2B2B33;
			opacity: 1;
			font-weight: bold;
		}

		.imageItBoxBodys {

			height: 75px;
			width: 100%;
			position: absolute;
			z-index: 1;
			top: 123px;
			display: flex;
			justify-content: space-around;


		}

		.pickerviewbox__leigu {
			position: absolute;
			z-index: 1;
			display: flex;
			justify-content: space-evenly;
			align-items: center;

			image {
				display: inline-block;
				width: 2rpx;
				height: 85%;
			}

		}

		// <view class="dituPagesBox">
		// 	购买配件
		// 	<image class="dituPages" src="/static/images/dituPages.png"></image>
		// 	<image class="dituPagesImg" src="/static/images/rightSign.png"></image>
		// </view>
		.dituPagesBox {
			width: 200rpx;
			height: 54rpx;
			position: absolute;
			display: flex;
			align-items: center;
			top: -54rpx;
			right: 0;
			z-index: 9;
			justify-content: flex-end;
			padding-right: 20rpx;
			box-sizing: border-box;

			span {
				display: inline-block;
				height: 34rpx;
				font-size: 24rpx;
				font-family: 蘋方-簡;
				font-weight: normal;
				line-height: 34rpx;
				color: #FFFFFF;
			}

		}

		.dituPagesImg {
			width: 24rpx;
			height: 24rpx;
		}

		.dituPages {
			width: 200rpx;
			height: 54rpx;
			position: absolute;
			bottom: 0;
			left: 0;
			z-index: -1;
		}

		/deep/.pickerviewbox {
			position: relative;
			z-index: 2;

			
		}

		.mypages__allocationTopItemLeftIcon {
			flex: 0 0 110rpx;
			height: 48rpx !important;
			width: 140‬rpx !important;
			background: url('/static/images/dian.png') no-repeat 50% 50%;
			background-size: 55%;

		}

		.mypages__allocationTop {
			display: flex;
		}

		.mypages__allocationTopItem {
			flex: 2;
			display: flex;
			justify-content: space-between;
			height: 25px;
		}

		.mypages__allocationTopItem:nth-child(3) {
			flex: 1;
			display: flex;
		}

		.mypages__allocationTopItemLeft {
			display: flex;
		}

		.mypages__mainTopPickerImgBox {
			width: 334rpx;
			height: 340rpx;
			position: relative;
			overflow: hidden;
		}

		/deep/.u-transition {
			width: 100% !important;
			height: 100% !important;
			/* background: #360; */
			position: absolute;
			top: 0;
			left: 0;
		}

		/deep/.u-image {
			width: 100% !important;
			height: 100% !important;
			/* background: #360; */
			// position: absolute;
			// top: 0;
			// left: 0;
		}

		.mypages__mainTopPickerImg {
			position: absolute;
			top: -51%;
			left: -60%;
			width: 680rpx;
			height: 680rpx !important;
			transform: scale(1.25);
		}

		/deep/.u-image__image {
			position: absolute;
			top: 0;
			left: 0;
			width: 334rpx !important;
			height: 334rpx !important;
		}

		.mypages__mainTopPickerImg:nth-child(1) {
			z-index: 2;
		}

		.mypages__mainTopPickerImg:nth-child(2) {
			z-index: 3;
		}

		.mypages__mainTopPickerImg:nth-child(3) {
			z-index: 1;
		}

		.mypages__mainTopPickerImg:nth-child(4) {
			z-index: 3;
		}

		/deep/.imageItBox {
			height: 75px !important;
			width: 75px !important;
			display: flex;
			justify-content: center;
			text-align: center;
			position: relative;
			left: 50%;
			transform: translateX(-50%);

			image {
				transition: all .3s;
			}


		}

		.imageItBox--activateBox {
			height: 75px !important;
			width: 75px !important;
			background: radial-gradient(circle, rgba(255, 255, 255, 0) 0%, rgba(231, 233, 247, 0.48) 100%);
			border-radius: 16px;
		}

		/deep/.imageItBox--activate {
			opacity: 1;
			border-radius: 16px;
		}

		/deep/.imageIt--activate {
			width: 60px !important;
			margin: auto;
			height: 60px !important;
			display: flex;
			justify-content: center;
			align-items: center;

			div {
				width: 90%;
				height: 90%;
			}

			img {
				width: 90%;

			}
		}

		/deep/.imageIt {
			width: 42px !important;
			margin: auto;
			height: 42px !important;
			display: flex;
			justify-content: center;
			align-items: center;

			div {
				width: 90%;
				height: 90%;
			}

			img {
				width: 90%;

			}
		}


	}
</style>
